<template>
	<view class="eco-container" :style="{background: 'linear-gradient(180deg, #F5FBF4 0%, #E4F3E1 100%)'}">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">双螺旋行动</text>
			<view class="subtitle-group">
				<text class="subtitle">节能减排数智化管理平台</text>
				<text class="subtitle-en">SHUANGTA · DIGITAL</text>
			</view>
		</view>

		<!-- 审核菜单 -->
		<view class="approval-menu">
			<view 
				v-for="(item, index) in list" 
				:key="index" 
				class="menu-item"  
				@click="uniTo(item)"
				:hover-class="'menu-item-active'"
			>
				<view class="icon-wrapper" :style="{backgroundColor: item.color}">
					<image :src="item.icon" class="item-icon" mode="aspectFit" />
				</view>
				<view class="text-group">
					<text class="menu-title">{{ item.text }}</text>
					<text class="menu-subtitle">{{ item.desc }}</text>
				</view>
				<image src="/static/arrow-right.png" class="arrow-icon" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	const props = defineProps({
		list: Array
	})

	const uniTo = (item) => {
		uni.navigateTo({
			url: item.url
		});
	}
</script>

<style lang="scss">
	.eco-container {
		min-height: 100vh;
		padding: 32rpx 24rpx 0;
		background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%) !important;
	}

	/* 顶部标题 */
	.header {
		padding: 32rpx 0 48rpx;
		
		.title {
			display: block;
			font-size: 48rpx;
			color: #334155;
			font-weight: 700;
			letter-spacing: 1rpx;
			margin-bottom: 16rpx;
			text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
		}

		.subtitle-group {
			display: flex;
			flex-direction: column;
			
			.subtitle {
				font-size: 28rpx;
				color: #64748b;
				line-height: 1.6;
			}
			
			.subtitle-en {
				font-size: 24rpx;
				color: #94a3b8;
				letter-spacing: 1rpx;
			}
		}
	}

	/* 审核菜单 */
	.approval-menu {
		.menu-item {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			margin-bottom: 28rpx;
			display: flex;
			align-items: center;
			position: relative;
			transition: all 0.3s ease;
			box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
			border: 1rpx solid rgba(226, 232, 240, 0.8);
			
			&::after {
				display: none; /* 移除旧的边框 */
			}
			
			&-active {
				background-color: rgba(99, 102, 241, 0.03);
				transform: translateY(-2rpx);
				box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
			}

			.icon-wrapper {
				width: 96rpx;
				height: 96rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				position: relative;
				background-color: #6366f1 !important; /* 默认图标背景色 */
				box-shadow: 0 8rpx 12rpx rgba(99, 102, 241, 0.15);
				
				&::after {
					display: none; /* 移除旧的阴影 */
				}

				.item-icon {
					width: 56rpx;
					height: 56rpx;
					z-index: 2;
				}
			}

			.text-group {
				flex: 1;
				
				.menu-title {
					font-size: 34rpx;
					color: #334155;
					font-weight: 600;
					line-height: 1.4;
					display: block;
				}
				
				.menu-subtitle {
					font-size: 26rpx;
					color: #64748b;
					margin-top: 8rpx;
					display: block;
				}
			}

			.arrow-icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 16rpx;
				opacity: 0.5;
			}
		}
	}
</style>